figure en figcaption

Het <figure> en <figcaption> element zijn twee nieuwe block level elementen in HTML5. Ze werden geïntroduceerd in HTML5 om illustraties zoals afbeeldingen, video's, codeblokken, svg, canvas, …, samen met een beschrift als een geheel te kunnen identificeren. Kwestie van de juiste semantiek dus.

Met het <figcaption> element kan je een bijschrift plaatsen bij de illustratie en is een aanvulling, en dus geen vervanging van het alt of title attribuut, die een korte omschrijving geven van wat er te zien is op de illustratie.

Ook moet niet elke afbeelding in een <figure> staan met een <figcaption> als bijschrift. Het kan gebruikt worden om illustraties die meer uitleg vragen, verder toe te lichten.

De voordelen:

HTML code wordt semantisch. Het <figure> element identificeert illustraties met hun bijschrift.
Het <figure> element kan ook meerdere afbeeldingen bevatten met één <figcaption> die een algemene omschrijving geeft van alle afbeeldingen.

We voegen een bijschrift toe aan de foto:

<figure>
   <img src="images/jonge-marsman.jpg" alt="foto van de jonge Marsman" />
   <figcaption>De jonge Hendrik Marsman</figcaption>
</figure>

2017-02-21 21:12:55